<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>发货列表</e-heading>
      <template>
        <el-tabs v-model="type" @tab-click="handleTabs">
          <el-tab-pane label="待发货" name="0"></el-tab-pane>
          <el-tab-pane label="发货中" name="1"></el-tab-pane>
          <el-tab-pane label="已收货" name="2"></el-tab-pane>
        </el-tabs>
      </template>
      <el-form v-bind="getFormProps({labelWidth:'100px'})" :inline="true"  >
        <el-form-item label="订单编号：" class="express-search">
          <el-input size="small" v-model="query.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人：" class="express-search">
          <el-input size="small" v-model="query.receiver"></el-input>
        </el-form-item>
        <el-form-item label="快递公司：" class="express-search" v-if="type != 0">
          <el-select size="small" v-model="query.companyCode" placeholder="请选择">
            <el-option
              v-for="item in companyList"
              :key="item.fieldValue"
              :label="item.fieldName"
              :value="item.fieldValue"
              placeholder="请选择一个快递公司">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运单编号：" class="express-search" v-if="type != 0">
          <el-input size="small" v-model="query.logisticsNo"></el-input>
        </el-form-item>
        <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
      </el-form>
      <div v-if="list.list && list.list.length>0" class="express-table">
        <template>
          <el-table
            v-bind="getTableProps()"
            :data="list.list"
            stripe
            style="width: 100%">
            <el-table-column
              prop="goodsName"
              label="商品名称">
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.goodsList" :key="index">{{item.goodsName}}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNo"
              label="订单编号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="receiver"
              label="收货人"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="收货地址"
              width="">
            </el-table-column>
            <el-table-column
              prop="contact"
              label="联系方式"
              align="center">
            </el-table-column>
            <el-table-column
              prop="remark"
              :label="type == 0?'备注':'快递公司'"
              align="center">
              <template slot-scope="scope">
                {{type == 0?(scope.row.remark?scope.row.remark:'--'):scope.row.companyName}}
              </template>
            </el-table-column>
            <el-table-column
              v-if="type != 0"
              prop="logisticsNo"
              label="运单编号 ">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100"
              align="center">
              <template slot-scope="scope">
                <el-button v-if="type == 0"
                  type="link"
                  @click="handleSend(scope.row)">发货</el-button>
                <el-button v-if="type != 0"
                  type="link"
                  @click="handleShow(scope.row)">查看</el-button>
                <el-button v-if="type == 1"
                  type="link"
                  @click="handleEdit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="list.total"
            v-bind="getPaginationProps(list)"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </template>
      </div>
      <e-placeholder v-else text="暂无订单!"></e-placeholder>
    </div>
    <send-edit-dialog
      :editDialog.sync = "editDialog"
      :data = "DialogEditData"
      :companyList.sync = "companyList"
      v-if = "DialogEditData"></send-edit-dialog>
    <show-dialog :showDialog.sync = "showDialog" :data = "DialogShowData" v-if = "DialogEditData"></show-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import api from 'api/express'
import { pagingList } from 'utils/mixins'
import SendEditDialog from './SendEditDialog'
import ShowDialog from './ShowDialog'
export default {
  mixins: [pagingList],
  computed: {
    ...mapState({
      list: state => state.express.send_list
    })
  },
  components: {
    SendEditDialog, ShowDialog
  },
  data () {
    let isCertify
    return {
      isCertify,
      type: this.$route.params.type || 0,
      query: this.getQuery({
        status: parseInt(this.type) || 0,
        orderNo: this.$route.query.orderNo || null,
        receiver: this.$route.query.receiver || null,
        companyCode: this.$route.query.companyCode || null,
        logisticsNo: this.$route.query.logisticsNo || null
      }),
      editDialog: false,
      showDialog: false,
      DialogEditData: {},
      DialogShowData: {},
      companyList: []
    }
  },
  watch: {
    editDialog () {
      if (this.editDialog === false) {
        this.fetch(this.query)
        this.DialogEditData = {}
      }
    },
    showDialog () {
      if (this.showDialog === false) {
        this.fetch(this.query)
        this.DialogShowData = {}
      }
    }
  },
  created () {
    api.dict_company().then((json) => {
      this.companyList = json.data
    })
  },
  methods: {
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      query.status = parseInt(this.type)
      this.$store.dispatch('express/send_list', query)
    },
    handleTabs (tab, event) { // 切换选项卡
      this.query.orderNo = null
      this.query.receiver = null
      this.query.companyCode = null
      this.query.logisticsNo = null
      this.$router.push({path: '/express/send/' + this.type})
      this.fetch(this.query)
    },
    handleSend (row) {
      this.DialogEditData = row
      this.editDialog = true
    },
    handleEdit (row) {
      this.DialogEditData = row
      this.editDialog = true
    },
    handleShow (row) {
      this.DialogShowData = row
      this.showDialog = true
      console.log(this.DialogShowData, this.showDialog)
    }
  }
}
</script>

<style lang="scss">
  
  .express-search{
    .el-select {
      width: auto;
      .el-input{
        width: 220px
      }
    }
  }

</style>
